<template>
	<view class="goods-info">
		<view class="font-color-textPrimary pb-8 font-w-500"
			v-if="order.goods_type!=1&&order.collection_code&&order.collection_code.length>1">
			{{handleLang('商品编号')}}
		</view>
		<view class="flex flex-w  gap-12 mb-16"
			v-if="order.goods_type!=1&&order.collection_code&&order.collection_code.length>1">
			<view class="font-size-12 pa-3 br-4" style="background-color: #e5e5e5;"
				v-for="item in order.collection_code" :key="item">
				#{{item}}
			</view>
		</view>

		<view class="font-color-textPrimary pb-8 font-w-500">
			{{handleLang('订单详情')}}
		</view>
		<view class="flex flex-js-sb ptb-8 flex-ai-center">
			<text class="font-color-999">{{handleLang('订单金额')}}:</text>
			<view class="flex-center" v-if="order.order_type==7">
				<w-icon :name="order.crystal_type | crystal_type" size="16"></w-icon>
				<text class="ml-4 font-color-textPrimary font-size-14">{{ order.num }}</text>
			</view>
			<view class="font-size-16 font-color-textPrimary" v-else>
				<text>￥</text>
				<text>{{['8',8].includes(order.order_type)? order.price:order.total_price}}</text>
			</view>
		</view>
		<view class="flex flex-js-sb ptb-8 flex-ai-center">
			<text class="font-color-999">{{handleLang('订单')}}ID号:</text>
			<view class="font-size-16 font-color-textPrimary flex flex-ai-center">
				<text class="font-size-14">{{order.order_sn}}</text>
				<w-icon name="copy-disable" size="18" @click='$tools.copyText(order.order_sn)'></w-icon>
			</view>
		</view>
		<view class="flex flex-js-sb ptb-8 flex-ai-center" v-if="order.buy_order_sn">
			<text class="font-color-999">{{handleLang('分账ID号')}}:</text>
			<view class="font-size-16 font-color-textPrimary flex flex-ai-center">
				<text class="font-size-14">{{order.buy_order_sn}}</text>
				<w-icon name="copy-disable" @click='$tools.copyText(order.buy_order_sn)'></w-icon>
			</view>
		</view>
		<view class="flex flex-js-sb ptb-8 flex-ai-center" v-if="!order.card||!order.card.length">
			<text class="font-color-999">{{[1,2,'1','2'].includes(order.order_type)? handleLang('支付方式'):handleLang("到账账户")}}:</text>
			<view class="font-size-16 font-color-textPrimary flex flex-ai-center ">
				<text class="font-size-14">{{order.pay_way|payName}}</text>
			</view>
		</view>
		<view class="" v-if="order.card&&order.card.length">
			<view class="font-size-14" v-for="(item,index) in order.card">
				<view class="flex flex-js-sb ptb-8">
					<text class="font-color-999">E卡卡号{{order.card.length==1? "":index+1}}：</text>
					<view class="font-color-textPrimary flex flex-ai-center">
						<text>{{item.card_sn}}</text>
						<w-icon class='ml-4' name="copy-disable" @click='$tools.copyText(item.card_sn)'></w-icon>
					</view>
				</view>
				<view class="flex flex-js-sb ptb-8">
					<text class="font-color-999">{{handleLang('E卡密码')}}{{order.card.length==1? "":index+1}}：</text>
					<view class="font-color-textPrimary flex flex-ai-center">
						<text>{{item.show_pwd? item.card_pwd:item.card_keys}}</text>
						<u-icon class='ml-4' :name="item.show_pwd? 'eye-fill':'eye-off'" color='#666666'
							@click='showECardPass(item)'></u-icon>
						<w-icon v-if="item.card_pwd" class='ml-8' name="copy-disable"
							@click='$tools.copyText(item.card_pwd)'></w-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="font-color-textPrimary pb-8 mt-16 font-w-500" v-if="order.order_status!=3&&step>-1">
			{{handleLang('订单状态')}}
		</view>
		<view class="mt-8" v-if="order.order_status!=3&&step>-1&&order.order_type!=11">
			<u-steps :current="step" direction="column" dot activeColor='#f52500'>
				<u-steps-item v-for="key in [1,7,2]" :key="key">
					<view slot="desc" class='pb-20 font-size-14 '
						:class='order.order_status==key? `font-color-theme`:`font-color-999`'>
						<text>{{process[key].name && handleLang(process[key].name)}}</text>
						<text class='ml-8'
							v-if="order.order_status==key">（{{order[process[key].time]|formatDate}}）</text>
					</view>
					<view class="slot-icon" slot="icon" :class='{active:order.order_status==key}'></view>
				</u-steps-item>
			</u-steps>
		</view>
		<view class="mt-8">
			<u-steps :current="step" direction="column" dot activeColor='#f52500'>
				<u-steps-item v-for="pro in process">
					<view slot="desc" class='pb-20 font-size-14'
						:class='order.order_status==pro.status? `font-color-theme`:`font-color-999`'>
						<text>{{pro.title}}</text>
						<text class='ml-8' v-if="order.order_status==pro.status">（{{order[pro.time]|formatDate}}）</text>
					</view>
					<view class="slot-icon" slot="icon" :class='{active:order.order_status==pro.status}'></view>
				</u-steps-item>
			</u-steps>
		</view>
		<view class="flex flex-dir-col font-size-12 font-color-999"
			v-if="[1,2,'1','2'].includes(order.order_type)&&order.order_status==1">
			<text>{{handleLang('说明')}}:</text>
			<text class='mt-4'>{{handleLang('1.超时未支付，系统会自动取消。')}}</text>
			<text class='mt-4'>{{handleLang('2.同一账号一段时间内累计取消3次订单,将会被限购一段时间。')}}</text>
		</view>

		<!-- 兑换密码验证 -->
		<!-- <password-authentification 
		ref="pwdAuth" 
		v-model="showPayPass"
		type="ECard"
		@finish="passRes"
		></password-authentification> -->


		<u-popup :show='showPayPass' round='12' mode='center'>
			<view class="ptb-26 br-12 auth-popup" style="width: 654rpx;">
				<w-icon size='24' @click='showPayPass=false' class='close' name="close3"></w-icon>
				<view class="pt-10 text-center font-color-textPrimary font-size-16 font-w-500">
					{{handleLang('请输入操作密码')}}
				</view>
				<view class="font-color-textPrimary font-size-12 text-center" @click="toForget">
					{{handleLang('忘记密码？')}}
				</view>
				<view class="flex flex-center mt-30">
					<u-code-input :focus='true' v-model="pwd" dot :maxlength="6" borderColor='transparent'
						@finish='passRes'>
					</u-code-input>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import OrderStatusMap from './orderStatusMap.js'
	import {
		getECardPass
	} from '@/api/shop/shop.js'
	export default {
		props: {
			order: {
				type: Object,
				default () {
					return {
						product: {}
					}
				}
			}
		},
		data() {
			return {
				showPayPass: false,
				ecard: {},
				pwd: ''
			}
		},
		filters: {
			payName(v) {
				let map = {
					huifu: "钱包A",
					yibao: "易宝支付"
				}
				return map[v]
			},
			crystal_type(v) {
				let map = {
					'yellow': 'hsj',
					'purple': 'zsj',
					'blue': 'lsj'
				}
				return map[v]
			}
		},
		computed: {
			step() {
				if (!this.order.order_status) return 0;
				return [1, 7, 2].indexOf(Number(this.order.order_status))
			},
			process() {
				let statusArr = []
				if (this.order.order_status <= 3) {
					statusArr = [1, 7, 2, 3]
				} else if (this.order.order_status < 8) {
					statusArr = [5, 6, 4]
				} else {
					statusArr = [5, 8, 4]
				}


				OrderStatusMap[this.order.order_type]
				return statusArr.map(v => {
					let obj = OrderStatusMap[this.order.order_type][v];
					return {
						status: v,
						title: obj.process,
						time: 'updatetime'
					}
				})
			}
		},
		methods: {
			copy() {
				this.$tools.copyText(this.order.order_sn)
			},
			showECardPass(item) {
				if (item.card_pwd) {
					item.show_pwd = !item.show_pwd
				} else {
					this.showPayPass = true;
					this.ecard = item;
				}
			},
			toForget() {
				uni.navigateTo({
					url: '/pages/my/actionPwd/getCode?action=reset'
				})
			},
			passRes(res) {
				getECardPass({
					pay_password: res,
					sn: this.ecard.card_sn,
					order_id: this.order.id
				}).then(res => {
					let index = this.order.card.findIndex(v => v.card_sn == this.ecard.card_sn)
					this.$set(this.order.card[index], 'card_pwd', res.data)
					this.$set(this.order.card[index], 'show_pwd', true)
					this.showPayPass = false;
					this.pwd = '';
				})
			}
		}
	}
</script>

<style lang="scss">
	.goods-info {
		.slot-icon {
			width: 10rpx;
			height: 10rpx;
			border-radius: 50%;
			background-color: #cfcfcf;
		}

		.slot-icon.active {
			background-color: #0081FF;
		}

		/deep/ .u-steps-item__line {
			background-color: #cfcfcf !important;
		}
		/deep/ .u-steps-item__wrapper{
			background-color:#fff;
		}

		.auth-popup {
			position: relative;

			.close {
				position: absolute;
				right: 0;
				top: -80rpx;
				z-index: 2;
			}

			/deep/ .u-code-input {
				gap: 20rpx;
			}

			/deep/ .u-code-input__item {
				background-color: #ECECEC;
				@extend .br-8;
				width: 84rpx !important;
				height: 84rpx !important;
				margin-right: 0 !important;
			}
		}
	}
</style>